'use client';

import { Layout } from 'antd';
import { useState } from 'react';
import { TaskSidebar } from './TaskSidebar';
import { ContentViewer } from './ContentViewer';
import type { Course } from '@prisma/client';

const { Sider, Content } = Layout;

interface CoursePreviewProps {
  courseId: string;
  initialCourse: Course;
}

export function CoursePreview({ courseId, initialCourse }: CoursePreviewProps) {
  const [selectedContent, setSelectedContent] = useState<{
    id: string;
    type: 'task' | 'step';
  } | null>(null);

  const handleContentSelect = (id: string, type: 'task' | 'step') => {
    setSelectedContent({ id, type });
  };

  return (
    <Layout className="h-full">
      <Sider 
        width={300} 
        theme="light"
        className="border-r border-gray-200 overflow-y-auto"
      >
        <TaskSidebar 
          courseId={courseId} 
          onSelect={handleContentSelect}
        />
      </Sider>
      <Content className="bg-white">
        <ContentViewer
          courseId={courseId}
          taskId={selectedContent?.type === 'task' ? selectedContent.id : undefined}
          stepId={selectedContent?.type === 'step' ? selectedContent.id : undefined}
        />
      </Content>
    </Layout>
  );
} 